import React from "react";
import { Card, Typography, Space, Tag, Divider, Row, Col } from "antd";
import type { Question, QuestionType } from "../types";

const { Title, Text } = Typography;

interface ExamPreviewProps {
  examData: {
    templateName: string;
    totalScore: number;
    duration: number;
    questions: Question[];
  };
}

const ExamPreview: React.FC<ExamPreviewProps> = ({ examData }) => {
  const { templateName, totalScore, duration, questions } = examData;

  // 按题型分组
  const questionsByType = questions.reduce<Record<QuestionType, Question[]>>(
    (acc, question) => {
      if (!acc[question.type]) {
        acc[question.type] = [];
      }
      acc[question.type].push(question);
      return acc;
    },
    {
      choice: [],
      programming: [],
      analysis: [],
      fill: [],
      essay: [],
    }
  );

  const typeLabels: Record<QuestionType, string> = {
    choice: "选择题",
    programming: "编程题",
    analysis: "分析题",
    fill: "填空题",
    essay: "简答题",
  };

  return (
    <div>
      <Card>
        <Space direction="vertical" style={{ width: "100%" }}>
          <Row justify="center" style={{ marginBottom: 24 }}>
            <Title level={3}>{templateName}</Title>
          </Row>

          <Row justify="space-between" style={{ marginBottom: 16 }}>
            <Col>
              <Text>总分：{totalScore}分</Text>
            </Col>
            <Col>
              <Text>考试时长：{duration}分钟</Text>
            </Col>
          </Row>

          <Divider />

          {Object.entries(questionsByType).map(
            ([type, typeQuestions], index) => (
              <div key={type}>
                <Title level={4}>
                  {typeLabels[type as QuestionType]}
                  （共{typeQuestions.length}题，
                  {typeQuestions[0]?.score || 0}分/题， 共
                  {typeQuestions.length * (typeQuestions[0]?.score || 0)}分）
                </Title>

                {typeQuestions.map((question: Question, qIndex: number) => (
                  <Card
                    key={question.id}
                    size="small"
                    style={{ marginBottom: 16 }}
                    title={`第${qIndex + 1}题`}
                    extra={
                      <Space>
                        <Tag color="blue">{question.score}分</Tag>
                        <Tag
                          color={
                            question.difficulty === "easy"
                              ? "green"
                              : question.difficulty === "medium"
                                ? "orange"
                                : "red"
                          }
                        >
                          {question.difficulty === "easy"
                            ? "简单"
                            : question.difficulty === "medium"
                              ? "中等"
                              : "困难"}
                        </Tag>
                      </Space>
                    }
                  >
                    <Space direction="vertical" style={{ width: "100%" }}>
                      <Text>{question.content}</Text>

                      {question.type === "choice" && question.options && (
                        <Space direction="vertical" style={{ marginTop: 8 }}>
                          {question.options.map(
                            (option: string, optionIndex: number) => (
                              <Text key={optionIndex}>
                                {String.fromCharCode(65 + optionIndex)}.{" "}
                                {option}
                              </Text>
                            )
                          )}
                        </Space>
                      )}
                    </Space>
                  </Card>
                ))}

                {index < Object.keys(questionsByType).length - 1 && <Divider />}
              </div>
            )
          )}
        </Space>
      </Card>
    </div>
  );
};

export default ExamPreview;
